﻿@model TVShows_EF5.Models.TVShow
@using Newtonsoft.Json

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_TemporadaLayout.cshtml";
}

<h2>Detalle del show: @Model.nombre</h2>

<img src="@Model.foto" style="max-width: 100%;" />

<blockquote>
    @Model.descripcion
</blockquote>

<table>
    <thead>
        <tr>
            <th>Temporada / Capitulo</th>
            <th>Primera emisión</th>
            <th>Trama</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: episodios">
        <tr>
            <td>
                <span  data-bind="text: temporada"></span> -
                <span  data-bind="text: capitulo"></span>
            </td>
            <td data-bind="text: primeraEmision"></td>
            <td data-bind="text: trama"></td>
        </tr>
    </tbody>
</table>

@section Scripts {
    @Scripts.Render("~/bundle/knockout")
    <script>
        function AppViewModel() {
            var self = this;
            self.episodios = ko.observable();
        }

        var vm = new AppViewModel();
        ko.applyBindings(vm);

        $(document).ready(function () {
            $.ajax({
                url: "@Url.Content("~/Api/WebApi/ObtenerEpisodios/" + Model.id)",
                data: "", // no tengo información adicional que transmitir en el GET
                success: function (data, textStatus, jqXHR) {
                    console.log("resultado", data);
                    vm.episodios(data);
                },
                dataType: "json"
            });
            
        });
    </script>
}